<template>
  <div class="details-popup">
    <div class="details-content">
      <div class="details-title">
        <div class="title">{{ title }}详情</div>
        <div class="close-girl" @click="closeDel"></div>
      </div>

      <div class="tails-content">
        <el-input
          v-model="searchText"
          placeholder="请输入"
          :suffix-icon="Search"
          class="search"
        />
        <div class="main-content">
          <div class="title-bar">
            <div class="customer">月份</div>
            <div class="customer">客户</div>
            <div class="customer">应收帐款余额</div>
            <div class="customer">已到结算周期金额</div>
            <div class="customer">计划回收金额</div>
            <div class="customer">已收回金额</div>
            <div class="customer">逾期金额</div>
            <div class="customer">计划资金应回收余额</div>
            <div class="customer">已开票待回款金额</div>
            <div class="customer">客户类型</div>
          </div>
          <div class="title-table">
            <div v-for="(item, i) in datas" :key="i" class="ain-column">
              <div class="customer">{{ item.rq }}</div>
              <div class="customer">{{ item.kh }}</div>
              <div class="customer">{{ item.yszkye }}</div>
              <div class="customer">{{ item.ydjszzje }}</div>
              <div class="customer">{{ item.jhhsje }}</div>
              <div class="customer">{{ item.yhsje }}</div>
              <div class="customer">{{ item.yqje }}</div>
              <div class="customer">{{ item.jhzjyhsje }}</div>
              <div class="customer">{{ item.ykpdhkje }}</div>
              <div class="customer">{{ initData.khlx }}</div>
            </div>
          </div>
        </div>
        <div class="details-page">
          <!-- <el-pagination background layout="prev, pager, next" :total="90" /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { postRequest } from "../utils/request";
const emits = defineEmits(["close-details"]);
const props = defineProps({
  initData: {
    type: Object,
    default: {},
  },
});
let title = ref("");
let datas = ref([]);
let searchText = ref("");
let closeDel = () => {
  emits("close-details");
};
onMounted(() => {
  title.value = props.initData.seriesName;
  postRequest("/screen/query/getCwYskMx", { startTime: props.initData.name })
    .then(({ code, data }) => {
      if (code == 200) {
        datas.value = data;
      } else {
        datas.value = [];
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
});
</script>
<style lang="less" scoped>
.details-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .details-content {
    width: 70vw;
    height: 75vh;
    background: #2f5892e0;
    .details-title {
      width: 100%;
      height: 5vh;
      border-bottom: #32d7e99a 1px solid;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .title {
        width: 90%;
        height: 100%;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        font-size: 1.1vw;
        color: #ffffff;
        text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
        opacity: 0.97;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
    .tails-content {
      width: 100%;
      height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .search {
        width: 15vw;
        margin-top: 1vh;
        margin-left: 1.5vw;
      }
      .details-page {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-right: 2vw;
        :deep .number {
          background: #4b7aaa !important;
          color: #ffffff98 !important;
          border: #38cae1 1px solid !important;
        }
        :deep .is-active {
          background: #2c5989 !important;
          color: #ffffff !important;
        }
        :deep .btn-prev {
          background: #4b7aaa !important;
          color: #fff !important;
          border: #38cae1 1px solid !important;
        }
        :deep .btn-next {
          background: #4b7aaa !important;
          color: #fff !important;
          border: #38cae1 1px solid !important;
        }
        :deep .btn-quicknext {
          background: #4b7aaa !important;
          color: #ffffff98 !important;
          border: #38cae1 1px solid !important;
        }
      }
      .main-content {
        width: 96%;
        height: 58vh;
        margin: 1.1vh 2%;
        .title-bar {
          width: 100%;
          height: 5vh;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: #34a5c7 2px solid;
          font-family: Dream Han Sans CN;
          font-weight: normal;
          font-size: 0.8vw;
          color: #fffffffd;
          text-shadow: 0px 2px 5px rgba(1, 4, 8, 0.45);
        }
        .title-table {
          width: 100%;
          height: 53.5vh;
          .ain-column {
            width: 100%;
            height: 5.2vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: Dream Han Sans CN;
            font-weight: normal;
            font-size: 0.8vw;
            color: #fffffffd;
            text-shadow: 0px 2px 5px rgba(1, 4, 8, 0.45);
          }
          .ain-column:nth-child(even) {
            border: #7096b9 1px solid;
            background: #32669b;
          }
        }
      }
    }
    .close-girl {
      width: 32px;
      height: 32px;
      background: url("../assets/close.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .customer {
      width: 7vw;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
:deep .el-input__wrapper {
  background-color: #295e92 !important;
  border: 2px solid #4da5c4 !important;
  box-shadow: none !important;
  .el-input__inner {
    color: #ffffff !important;
  }
}
:deep .el-input__suffix {
  color: #fff !important; /* 设置图标颜色 */
}
</style>
